<script setup lang="ts">
import html2canvas from 'html2canvas'
import DictTag from '@/components/DictTag/index.vue'
import { useDict } from '@/utils/dict'
import type { Student, StudentEducationInfo, StudentFamilyInfo, StudentScoreInfo } from '@/types/user'
import { parseTime } from '@/utils/ruoyi'
import exportPDF from '@/utils/exportPDF'

defineProps<
    {
      student?:
      Student &
      StudentScoreInfo &
      { familyMembers?: StudentFamilyInfo[]; educationalExperience?: StudentEducationInfo[] }
    }
>()

async function handleExport() {
  const promise = Promise.all([
    html2canvas(document.getElementById('page')!, { logging: false, scale: window.devicePixelRatio * 3 }),
  ])
  exportPDF(await promise, 'l', 'cm', [29.7, 21])
}

defineExpose({ onExport: handleExport })

const {
  sys_user_sex,
  student_disciplines,
  student_nation,
  student_political,
  student_language,
} = useDict(
  'sys_user_sex',
  'student_disciplines',
  'student_nation',
  'student_political',
  'student_language',
)
</script>

<template>
  <div  id="page" class="page">
    <h2 style="font-family:'黑体';font-size:11.2px;">附件4：</h2>
    <div class="title">
      <p>贵州省2022-2023学年本专科生国家励志奖学金初审学生名单</p>
      <span class="top1" style="left: 0;">学校名称：（公章）</span>
      <span></span>
      <span class="top2" style="right: 15cm;">填表日期：</span>
      <span></span>
    </div>
    <div class="kuang">
      <div class="center"><span>序号</span></div>
      <div class="center"><span>学生姓名</span></div>
      <div class="center"><span>公民身份证号码</span></div>
      <div class="center"><span>院系</span></div>
      <div class="center"><span>专业</span></div>
      <div class="center"><span>学号</span></div>
      <div class="center"><span>性别</span></div>
      <div class="center"><span>民族</span></div>
      <div class="center"><span>政治面貌</span></div>
      <div class="center"><span>入学年月</span></div>
      <div class="center yellow">
        <span>成绩排名总人数</span>
      </div>
      <div class="center yellow">
        <span>成绩排名</span>
      </div>
      <div class="center yellow">
        <span>必修课及格门数</span>
      </div>
      <div class="center yellow">
        <span>必修课门数</span>
      </div>
      <div class="center yellow">
        <span>是否实行综合考评排名（填写“是</span>
      </div>
      <div class="center yellow">
        <span>综合测评排名名次</span>
      </div>
      <div class="center yellow">
        <span>综合测评排名总人数</span>
      </div>
      <div class="center yellow">
        <span>是否为学校当前学年认定的家庭经济困难</span>
      </div>
      <div class="center yellow">
        <span>家庭经济困难等级</span>
      </div>
      <div class="center yellow">
        <span>学生本人花溪农商银行/贵州农信卡号</span>
      </div>
      <div class="content red"><span>例</span></div>
      <div class="content red"><span>XXX</span></div>
      <div class="content red"><span>520XXXXXXXXXXXXXXX</span></div>
      <div class="content red"><span>文学与新闻传播</span></div>
      <div class="content red"><span>汉语言文学</span></div>
      <div class="content red"><span>XXXXXXXXXX</span></div>
      <div class="content red"><span>女</span></div>
      <div class="content red"><span>汉族</span></div>
      <div class="content red"><span>中共党员/中共预备党员/共青团员</span></div>
      <div class="content red"><span>2020年9月</span></div>
      <div class="content red"><span>53</span></div>
      <div class="content red"><span>1</span></div>
      <div class="content red"><span>7</span></div>
      <div class="content red"><span>7</span></div>
      <div class="content red"><span>是</span></div>
      <div class="content red"><span>1</span></div>
      <div class="content red"><span>53</span></div>
      <div class="content red"><span>是</span></div>
      <div class="content red"><span>特别困难/困难/ 一般困难</span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
      <div class="content"><span></span></div>
    </div>
    <div class="bottom">
      <div class="pai">
        <span class="xia1" style="left: 0cm;">学院领导签字：</span>
        <span class="xia"></span>
        <span class="xia2" style="left: 4cm;">经办人：</span>
        <span class="xia"></span>
        <span class="xia3" style="left: 8cm;">联系电话:</span>
        <span class="xia"></span>
        <div class="da">注：纸质版只需打印序号至入学年月部分（A-J部分），电子版需据实填写全部栏目（A-T部分)</div>
      </div>
    </div>
    <div class="ye">
      <p>第1页，共1页</p>
    </div>
  </div>
</template>

<style>
* {
  box-sizing: border-box;
}
div.page {
  width: 29.7cm;
  height: 21cm;
  padding:  2.6cm 2.6cm 0;
  margin: auto;
  position: relative;
  display: grid;
  grid-template-rows: 5% 10% 40% 10% 35%;
}
.title {
  margin-bottom: 15px;
  position: relative;
}
.title p {
  margin-left: 1.5cm;
  width: 48%;
  border-bottom: 1.5px solid black;
  font-size:16px;
  font-weight: 900;
  font-family: 'FZXBSJW--GB1-0';
}
span.top1,
span.top2 {
  position: absolute;
  font-family: '宋体';
  font-size: 8.8px;
  font-weight: 600;
}
div.kuang {
  display: grid;
  grid-template-columns: 2fr 4fr 6fr 5.5fr 3.5fr 3fr 2.5fr 2.5fr 4.5fr 4.5fr 3.5fr 3.5fr 3.5fr 3.5fr 4.5fr 4fr 4.5fr 5.5fr 6.5fr 7fr;
  grid-template-rows:  2fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  border: 1px solid black;
  margin-top: 6px;
}
div.kuang div {
  border: 1px solid black;
}
div.center {
  display: grid;
  align-items: center;
  text-align: center;
  font-size: 9.6px;
  font-weight: 900;
  font-family: '黑体';
}
div.content{
  display: grid;
  align-items: center;
  text-align: center;
  font-size: 8.8px;
  font-family: '仿宋';
}
div.yellow {
  background-color: yellow;
}
div.red {
  color: red;
}
div.bottom {
  position: relative;
  font-family: '宋体';
  font-size: 8.8px;
}
.bottom .da {
  font-size: 12.8px;
  color: red;
  display: inline-block;
  width: 50%;
  position: absolute;
  right: 0;
  text-align: center;
}
span.xia1,
span.xia2,
span.xia3 {
  position: absolute;
  display: inline-block;
  margin-top: 10px;
  font-family: '黑体';
}
div.ye {
  text-align: center;
  font-size: 9.6px;
  position: relative;
}
div.ye p{
  position: absolute;
  bottom: 0;
  left: 11cm;
}
</style>
